<template>
    <div class="pageheader">
    应用概览
    </div>
    <section id="main-content" class="animated fadeInUp">
      <div class="row">
        <com-timestatistical :msg.sync="msg"></com-timestatistical>
        <com-totle-applacation :msg.sync="msg" :kind.sync="kind"  applicationurl='care/site/department/app/dashboard'></com-totle-applacation>
        <div class="departmentMain">
          <com-showcard cardheadertext="使用人次" role="应用"  cardurl="care/site/department/app/visitorRank" cardheaderinfotext="(排名越高使用人次越多)" :cardtablethead="usetimescardtablethead" :cardtablelist="departmentCenterCard" :msg.sync="msg" :kind.sync="kind" a="rank" b="appName" c="points" d=""></com-showcard>
          <com-showcard class="middleshowcard" cardheadertext="评价" role="应用" cardurl="care/site/department/app/scoreRank" cardheaderinfotext="(排名越高评分越高)" :cardtablethead="commentcardtablethead" :cardtablelist="departmentCenterCard" :msg.sync="msg" :kind.sync="kind" a="rank" b="appName" c="points" d=""></com-showcard>
          <com-showcard cardheadertext="收藏" role="应用" cardurl="care/site/department/app/favouriteRank" cardheaderinfotext="(排名越收藏人次越多)" :cardtablethead="likecardtablethead" :cardtablelist="departmentCenterCard" :msg.sync="msg" :kind.sync="kind" a="rank" b="appName" c="likenum" d=""></com-showcard>
        </div>
      </div>
    </section>
</template>
<script>
import ComTimestatistical from '../../components/timestatistical.vue';
import ComShowcard from '../../components/showcard.vue';
import ComTotleApplacation from '../../components/totleApplacation.vue';
export default {
  components: {
    ComTimestatistical,
    ComShowcard,
    ComTotleApplacation
  },
  data () {
    return {
      usetimescardtablelist: {},
      usetimescardtablethead: [{"name":"应用名称"},{"name":"总使用人数"}],
      commentcardtablelist: {},
      commentcardtablethead: [{"name":"应用名称"},{"name":"平均评分"}],
      likecardtablelist: {},
      departmentCenterCard:{},
      likecardtablethead: [{"name":"部门名称"},{"name":"收藏次数"}],
      msg:'1',
      kind:''
    }
  },
  created () {
    this.kind = this.$route.params.deptId;
  }
}
</script>
<style scoped>
div.row {
  width: 100%;
  background: #EEF4F5;
  margin-left: 0;
  margin-right: 0;
}
.middleshowcard {
  margin: 0 2%;
}
.pageheader{
  font-size: 18px;
  color: #333333;
}
</style>